<template>
  <div class="chat-wrapper">
    <div class="message-box">
      <div class="scrollArea" id="scrollRef" ref="scrollRef" >
        <div class="chatContentArea">
          <chatMessage
            v-for="(item, index) of activeItem.history"
            :date-time="item.dateTime"
            :text="item.text"
            :isMy="item.isMy"
          ></chatMessage>
        </div>
      </div>
    </div>
    <div class="input-box">
      <div class="clean" @click="delMessage">
        <img src="@/assets/images/clean.svg" alt="">
        清除历史
      </div>

      <div class="input">
        <el-input
          v-model="questionText"
          style="width: 100%"
          type="textarea"
          :autosize="{ minRows: 2,maxRows:2}"
          placeholder="请输入···"
          clearable
          resize="none"
        />
        <div class="send-img" @click="sendMessage">
          <img src="@/assets/images/send.svg" alt="">
        </div>
      </div>
    </div>
  </div>

</template>
<script>
export default {
  name: "aiChat",
  props:['dataSource','activeChatId',],

  data(){
    return{
      questionText:''
    }
  },
  computed:{
    activeItem(){
      return this.dataSource.find(item => item.id === this.activeChatId)
    }
  },
  methods:{
    delMessage(){
      this.activeItem.history=[]
    },
    sendMessage(){
      if(!this.questionText){
        ElMessage.error('您没有输入内容哦！')
        return
      }
      let historyList = this.activeItem.history
      let chatQuestionObj = {
        dateTime:getTimeByHHMMSS(),
        isMy:true,
        text:questionText.value
      }
      let html=`
    <div>
      <p>你好！我是你的专属AI伙伴，我拥有独特能力</p>
      <p>我非常希望你能给我持续的反馈，帮助我不断成长，期待你与我一起探索未来~</p>
    </div>
  `
      let chatAnswer={
        dateTime:getTimeByHHMMSS(),
        isMy:false,
        text:html,
      }
      historyList.push(chatQuestionObj)
      historyList.push(chatAnswer)
      this.questionText=''
    }
  }
}
</script>
<style scoped lang="less">
.chat-wrapper{
  padding: 30px 30px 20px;

  .message-box{
    height: 620px;
    min-height: 0;
    .scrollArea {
      overflow-y: auto;
      height: 100%;
    }
    .chatContentArea {
      padding: 10px;
    }
  }
  .input-box{
    .clean{
      display: flex;
      align-items: center;
      gap: 7px;
      font-size: 16px;
      color: #296DF1;
      cursor: pointer;
      >img{
        width: 30px;
      }
    }
  }

  .input{
    /deep/ .el-textarea__inner{
      box-shadow: none !important;
    }

    display: flex;
    border-radius: 8px 8px 8px 8px;
    border: 1px solid #296DF1;
    overflow: hidden;
  }
}
.send-img{
  width: 41px;
  height: 41px;
  border-radius: 50%;
  margin: 10px;

  display: flex;
  align-items: center;
  justify-content: center;
  background: #296DF1;
  cursor: pointer;
  >img{
    width: 29px;
    height: 29px;
  }
}
</style>
